<template>
<view class="cp_container">
	<u-picker 
		mode="time" 
		v-model="show" 
		:params="params" 
		@confirm="confirm">
	</u-picker>
	<u-button
		class="u-button"
		@click="show=true" 
		:hair-line="false" :custom-style="{
			position: 'relative',
			backgroundColor:'#f2f3f5',
			borderRadius: '5px',
			margin: '0',
			border:'0px solid #ffffff',
		}">
		{{date ? date : (title || '请选择')}}
		<u-icon name="calendar-fill" size="40" style="position: absolute;right: 5%;"></u-icon>
	</u-button>
</view>
</template>

<script>
//日期选择input组件
export default {
    name:"SelectDateInputCp",
    props:{
        value:{
            type:String,
            default:'',
        },
		title:{
		    type:String,
		    default:'',
		},
		params:{
			type:Object,
			default:()=>{
				return {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false,
				};
			},
		},
    },
    data() {
        return {
            show: false,  //控制组件的显示
        }
    },
    computed:{
        date:{ //日期
            get(){
                return this.value;
            },
            set(value){
                this.$emit('input',value);
            },
        },
    },
    methods:{
        confirm(e) {  //确定点击事件
			let d = [];
			e.year && d.push(e.year);
			e.month && d.push(e.month);
			e.day && d.push(e.day);
			let t = [];
			e.hour && t.push(e.hour);
			e.minute && t.push(e.minute);
			e.second && t.push(e.second);
			let data = d.join("-");
			if(t.length>0){
				data + " " + t.join("-");
			}
            this.date = data;
        }
    },
}
</script>

<style lang="scss" scoped>
.cp_container {
    text-align: center;
    width: 100%;
    /deep/.u-button{
        width: 100%;
    }
}
</style>
